<template>
  <div class="index">
    <commonHeader></commonHeader>

    <div class="swiper-wrap">
      <swiper
        v-if="ListBanner.length"
        :options="swiperOption"
        class="swiper-container swiper-container1 wow fadeInUp"
        ref="mySwiper"
      >
        <swiper-slide
          class="swiper-item"
          v-for="(item, index) of ListBanner"
          :key="index"
        >
          <img class="swiper-img" :src="item.banner" alt="" />
        </swiper-slide>
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      </swiper>
      <div class="banner-text">
        <div class="text">医学中心</div>
        <div class="introduct">开启私密年轻新时代</div>
      </div>
    </div>
    <!-- <div class="banner" v-if="ListBanner.length == 1">
      <img class="banner-img" :src="ListBanner[0].banner" alt="" />
      <div class="banner-text">
        <div class="text">医学中心</div>
        <div class="introduct">开启私密年轻新时代</div>
      </div>
    </div> -->

    <div class="about wow fadeInUp">
      <div class="common-tit">
        <div class="text">关于</div>
        <!-- <div class="introduct">开启私密年轻新时代</div> -->
      </div>
      <div class="about-con">
        每个女人都是世上独一无二的花朵，惠元医院悉心打造女性全生命周期管理平台，<br />
        汇集六大医学中心、现代化医疗设备、七星级酒店体验于一体， <br />
        提供与国际接轨的高品质医疗服务， <br />
        实现了女性高端医疗、养生疗愈与文化修养的独特探索。
      </div>
    </div>

    <div class="sixSystem wow fadeInUp bangxin">
      <div
        class="item"
        v-for="(item, index) in ListContent"
        :key="index"
        :id="`a${index}`"
      >
        <div class="text">
          <div class="tit">
            <div class="cn">{{ item.title }}</div>
            <div class="en">{{ item.subclassname }}</div>
          </div>
          <div class="introduct">
            {{ item.description }}
          </div>
          <div
            class="article"
            v-html="item.content.replace(/\n/g, '<br/>')"
          ></div>
        </div>
        <div class="img">
          <img :src="item.picture" alt="" />
        </div>
      </div>
    </div>

    <commonFooter></commonFooter>
  </div>
</template>

<script lang="ts">
// ajax
import { HelloChildBanner } from "@/assets/js/api";
import { Component, Vue } from "vue-property-decorator";
import commonHeader from "@/components/headers.vue";
import commonFooter from "@/components/footer.vue";

@Component({
  name: "medicine",
  components: {
    commonHeader,
    commonFooter,
  },
})
export default class medicine extends Vue {
  active = 0;
  ListBanner = [];
  ListContent = [];
  ListContentArticle = null;
  swiperOption = {
    // 参数选项,显示小点
    pagination: ".swiper-pagination",
    paginationClickable: true,
    //循环
    loop: true,
    // 用户操作swiper之后，是否禁止autoplay
    autoplayDisableOnInteraction: false,
    //滑动速度
    speed: 1000,
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
  };

  get swiper(): any {
    console.log(this.$refs, "this.$refs.mySwiper1");
    return this.$refs.mySwiper.$swiper;
  }

  cutNews(index: number): void {
    console.log(index);
    this.active = index;
  }

  // 跳转锚点
  goAnchor(selector: string): void {
    if (selector) {
      let anchor = this.$el.querySelector(selector);
      if (anchor) {
        console.log(selector, "selector");
        document.documentElement.scrollTop = anchor.offsetTop;
      }
    }
  }

  mounted() {
    let parameter = {
      bannerposition: 8,
      typename: "实力惠元-医学中心-图文管理",
    };
    // banner
    HelloChildBanner(parameter).then((response: any) => {
      console.log(response.data, "HelloChildBanner");
      if (response.data.ReturnCode == 0) {
        if (response.data.Data) {
          var data = response.data.Data;
          this.ListBanner = data[0].ListBanner;
          this.ListContent = data[0].ListContent;

          this.$nextTick(() => {
            if (this.$route.hash) {
              this.goAnchor(this.$route.hash);
            }
          });
        }
      }
    });
  }

  // watch: {
  //   // 刷新页面
  //   $route(to, from) {
  //     this.$router.go(0)
  //   }
  // }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/medicine.scss";
</style>
